<template>
  <div>
    <el-container>
      <el-main style="background-color: #fff">
        <div>
          <div>
            <div style="height: 60px;line-height: 60px;">
              <span>
                尊敬的用户，欢迎您使用售后管理系统!
              </span>
              <fieldset style="color:#333;border:#d1dbe5 solid 1px;" v-if="false">
                <legend>用户基本信息</legend>
                <div>
                  <span style="float: left;width: 50%;">姓名：{{userDto.userName}}</span>
                  <span >用户Id：{{userDto.userId}}</span>
                </div>
                <div>
                  <span style="float: left;width: 50%;">角色Id列表: {{userDto.roleId}}</span>
                  <span>省份: {{userDto.provinceName}}</span>
                </div>
                <div >
                  <span style="float: left;width: 50%;">城市：{{userDto.cityName}}</span>
                  <span>地区：{{userDto.areaName}}</span>
                </div>
                <div >
                  <span>联系方式：{{userDto.tel}}</span>
                </div>
              </fieldset>
            </div>
          </div>
        </div>
      </el-main>
      <el-aside width="400px">
        <el-container>
          <el-header style="background-color: #fff;margin-bottom: 200px" v-if="false">
            <div>
              <el-date-picker
                v-model="date"
                type="datetime"
                placeholder="选择日期时间"
                :readonly="true">
              </el-date-picker>
            </div>
          </el-header>
          <el-main  style="background-color: #fff" v-if="backlogListLength > 0">
            <el-badge :value="backlogListLength" class="item">
              <el-button size="small">待办事项</el-button>
            </el-badge>
            <custom-table
              :data="backlogList"
              :columns="columns"
              :operationColumn="operationColumns"
              >
            </custom-table>
          </el-main>
        </el-container>
      </el-aside>
    </el-container>
  </div>
</template>
<script>
  import { getRoleId, getUserId, getProvinceName, getCityName, getAreaName, getName, getUserTel } from '@/utils/token'
  import ElAside from '../../../node_modules/element-ui/packages/aside/src/main.vue'
  import { parseTime } from '@/utils'
  import CustomTable from '@/components/table/CustomTable'
  import { apiGetBacklogList } from '@/api/login'

  export default {
    components: {ElAside, CustomTable},
    created () {
      this.backLogListInit()
      this.def()
    },
    data () {
      return {
        userDto: {
          userName: getName(),
          userId: getUserId(),
          roleId: getRoleId(),
          provinceName: getProvinceName(),
          cityName: getCityName(),
          areaName: getAreaName(),
          tel: getUserTel()
        },
        backlogListLength: 0,
        date: '',
        columns: [
          {label: '事件', name: 'backlogName', align: 'center'},
          {label: '数量', name: 'num', align: 'center'}
        ],
        operationColumns: {
          operations: [
            {name: '前往处理', callback: this.handleSalve}
          ]
        }
      }
    },
    methods: {
      def () {
        var date = new Date()
        setInterval(() => {
          date = new Date()
          this.date = parseTime(date)
        }, 1000)
      },
      handleSalve(row) {
        this.$router.push(row.url)
      },
      backLogListInit() {
        apiGetBacklogList().then(rsp => {
          this.backlogList = rsp.data
          let totalNum = 0
          if (this.backlogList !== undefined) {
            this.backlogList.forEach(function (p) {
              if (p.num !== null) {
                totalNum += p.num
              }
            })
            this.backlogListLength = totalNum
          } else {
            this.backlogListLength = 0
          }
        })
      }
    }
  }
</script>
